<template>
  <div>
    <template  v-if="type==='cms'">
      <div class="article-list-box" v-if="list.length > 0">
        <Title title="相关阅读"/>
        <div class="list-box">
          <router-link class="article-item" v-for="item in list" :to="'/article/' + item.articleId + '/' + item.siteId" :key="item.articleId">
            <div>
              <div class="article-title">{{item.headline}}</div>
              <div class="article-info">
                <span>{{item.author}}</span>
                <span>·</span>
                <span>{{dateFormat(item.createTime, 'yyyy-MM-dd')}}</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </template>
    <template  v-else>
      <div class="article-list-box" v-if="list.length > 0">
        <Title title="相关阅读"/>
        <div class="list-box">
          <router-link class="article-item" v-for="item in list" :to="'/viewpointart/' + item.viewPointId" :key="item.viewPointId">
            <div>
              <div class="article-title">{{item.title}}</div>
              <div class="article-info">
                <span>{{item.author}}</span>
                <span>·</span>
                <span>{{dateFormat(item.createTime, 'yyyy-MM-dd')}}</span>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import Title from '@/components/title'
import { dateFormat } from '@/utils/date'
export default {
  props: ['type', 'list'],
  components: {
    Title
  },
  data () {
    return {

    }
  },
  filters: {
    timeFilter (val) {
      return val
    }
  },
  methods: {
    dateFormat: dateFormat
  }
}
</script>

<style scoped lang="scss">
.article-list-box {
  background-color: #fff;
  .list-box {
    .article-item {
      width: 100%;
      padding: .05rem .4rem;
      box-sizing: border-box;
      display: block;
      text-decoration: none;
      &:last-child {
        > div {
          border-bottom: none;
        }
      }
      >div {
        border-bottom: .01rem solid #E6E6E6;
        padding: .1rem 0;
      }
      .article-title{
        color: #333;
        font-size: .32rem;
        max-height: .92rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .article-info {
        color: #808080;
        font-size: .28rem;
        margin-top: 0.03rem;
        span {
          margin-right: .08rem;
        }
      }
    }
  }
}
</style>
